<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/6/5 0005
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 刘洪历
  Date: 2017/12/12
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
          type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>
    <audio id="ddap" autoplay="true" loop="false"
           src="http://cdnringuc.shoujiduoduo.com/ringres/user/a48/399/34833399.aac"></audio>
    <style>

        #div {
            position: absolute;
            background-color: aliceblue;
            margin: 0px auto;
            height: 100%;
            width: 100%;
        }

        h1 {
            text-align: center;
        }

        #p1 {
            position: absolute;
            background-color: wheat;
            height: 500px;
            width: 1000px;
            margin-top: 5%;
            margin-left: 20%;
        }

        #div1 {
            position: absolute;
            background-color: #a6e1ec;
            height: 16%;
            width: 100%;
            margin-top: 45%;
        }

        #input { /*margin-top: 30%;*/
            /*margin-top: 9px;*/
            position: absolute;
            height: 95%;
            width: 70%;
            font-size: 20px;
            font-family: "Courier New";
        }

        #submit {
            position: absolute;
            height: 95%;
            width: 30%;
            margin-left: 70%;
        }

        #left {
            position: absolute;
            height: 95%;
            width: 20%;
            background-color: #a6e1ec;
        }

        #right {
            position: absolute;
            height: 90%;
            width: 80%;
            margin-left: 20%;
            border: 1px solid red;
        }

        #leftTop {
            position: absolute;
            height: 14%;
            width: 100%;
            border: 1px solid black;
        }

        #navOfChat {
            position: absolute;
            width: 100%;
            height: 89%;
            border: 1px solid black;
            overflow: auto;
            font-size: 24px;
            font-family: "Courier New";
            background-image: url("/image/chat/3.jpg");
            opacity: 0.6;
            backgroun-size: 100% 100%;
            background-repeat: no-repeat;
        }

        #leftBottom {
            position: absolute;
            height: 83%;
            width: 100%;
            border: 1px solid red;
            margin-top: 33%;
            background-image: url("/image/chat/6.jpg");
            background-repeat: no-repeat;
            overflow: auto;
            color: aquamarine;
            font-size: 24px;
        }

        #myModal {
            position: absolute;
        }
    </style>
</head>
<body>
<jsp:include page="head.jsp"/>
<div id="div">
    <%--<h1>广播厅</h1>--%>
    <div id="p1">
        <div id="left">
            <div id="leftTop">
                <%--信息总数：<span id="onlineMessage"></span>--%>
                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1694190210&site=qq&menu=yes">
                    <img border="0" height="99%" width="100%" src="http://wpa.qq.com/pa?p=2:1694190210:51"
                         alt="点击这里给我发消息" title="点击这里给我发消息"/>
                </a>
            </div>
            <div id="leftBottom">

            </div>
        </div>
        <div id="right">
            <h3 align="center">客服小Q为您服务</h3>
            <nav id="navOfChat">
                <table id="navTable" align="center"
                       class="table table-striped table-bordered table-hover table-condensed">
                    <tr>
                        <th>用户名</th>
                        <th>消息</th>
                        <th>时间</th>
                    </tr>
                </table>
            </nav>

        </div>
        <div id="div1">
            <input type="text" id="input">
            <input type="button" id="submit" value="点击发送">
            <%--<a href="javascript:void(0)" id="submit" style="color: red">提交</a>--%>
        </div>
    </div>
</div>
<script>
    $("#submit").click(function () {
        var question = $("#input").val()
        $("#navTable").append("<tr>" +
            "<td>" + "游客" + "" + "</td>" +
            "<td>" + question + "</td>" +
            "<td>" + getNowFormatDate() + "</td>" +
            "</tr>");
        $.ajax(
            {
                url: "/intelligentReplay.do",
                data: {
                    msg: $("#input").val()
                },
                success: function (answer) {
                    $("#navTable").append("<tr>" +
                        "<td>" + "小Q" + "" + "</td>" +
                        "<td>" + answer + "</td>" +
                        "<td>" + getNowFormatDate() + "</td>" +
                        "</tr>");
                    // console.log(answer);
                    // alert(answer)
                }
            }
        );
        $("#input").val("");
    })

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        return currentdate;
    }
</script>
</body>
</html>

<body>

</body>
</html>
